<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/详情.css">
</head>
<body>

    <header>
        <div class="color">
        <div id="banxin1">
            <img id="shouji" src="images/images/关于我们_03.jpg" alt="" />
            <a href="" style="color: darkgray">手机版</a>
            <a href="" style="margin-left: 15px; color: darkgray">Q币充值</a>
            <span style="margin-left: 644px; line-height: 25px; color: darkgray"
              >您还未,</span
            >
            <a href="登录页.html">登录</a>
            <a href="" style="margin-left: 5px; color: darkgray">我的订单</a>
            <a href="" style="margin-left: 5px; color: darkgray">个人中心</a>
            <a href="" style="margin-left: 5px; color: darkgray">帮助中心</a>
            <span class="xS" style="margin-left: 15px; color: darkgray">游戏导航</span>
        </div>
    </div>
        <div id="bT">
            <div id="banxin2">
                <a href=""><img src="images/images/新版LOG_03.jpg" alt="" class="ccn"></a>
                <div class="stext">
                    <input type="text" placeholder="输入道具进行搜索" class="gaodu">
                    <img src="images/images/fJ_03.jpg" alt="" style="width: 49px; height:51 px; position: relative;top: -17px;left: 496px;">
                </div>
                <a href=""><img src="images/logo.png" alt="" class="logo"></a>
            </div>
        </div>
</header>
    <nav>
        <div class="sY">
            <div class="banxin3">
                <a href="道具城.html">首页</a>
                <a href="商品列表.html" style="font-size: 18px; color: #fff; background-color: #bf4d00;border-radius: 4px;">商品列表</a>
                <a href="">周边商城</a>
                <a href="">活动专区</a>
                <a href="">聚豆乐园</a>
                <a href="">会员聚乐部</a>
                <a href="">个人中心</a>
                <a href="购物车.html" style="color: #f74a4a;">购物车 &nbsp;<span>0</span></a>
            </div>
           <div class="banxin4">
            <div class="quanbu">
                    <a href="">全部道具</a>
                    <a href="">英雄级武器</a>
                    <a href="">投掷武器</a>
                    <a href="">功能性道具</a>
                    <a href="">道具</a>
                    <a href="">主武器</a>
                    <a href="">近战武器</a>
                    <a href="">副武器</a>
                    <a href="">礼包</a>
                    <a href="">角色</a>
            </div>
        </div>
        <div class="changtiao">
            <div class="fl">您现在的位置:&nbsp;
                <a href="道具城.html">穿越火线</a>
                &nbsp;>全部道具
            </div>
        </div>
        </div>

        <div class="news">
            <div class="banxin6">
             <div class="shoppinglist">
                <!-- <div class="zuokong">
                    <div id="yuantu">
                        <div id="dajin" class="background-image${data.goodsImg}"></div>
                        <div id="fangda"></div>
                    </div>
                </div>
                <div class="youshi">
                    <div class="tuzuo">
                    <img class="qianghua" src="${data.goodsImg}" alt="">
                    <a href=""><img src="" alt="">收藏商品</a>
                </div>
                <div class="jianjie">
                    <h2><span class="wending">${data.goodsName}</span></h2>
                    <div class="liehuzhe">
                        <div class="shisi">Q币价：${data.goodsDesc}</div>
                        <div class="huiyuan">
                            <div class="huiyuanjia">会员价：</div>
                            <span class="shiyidianjiu">${data.goodsPrice}QB</span>
                            <div class="weixinjia">微信价：</div>
                            <span class="shisandianwuba">￥${data.goodsPrice}</span>
                        </div>
                    </div>
                    <div class="shiyongqixian">
                        <span class="qixian">使用期限:</span>
                        <img src="images/images列表/images/五个_03.jpg" alt="" class="five">
                    </div>
                    <div class="lianggeanniu">
                        <input type="button" value="加入购物车" class="cheche" >
                        <input type="button" value="赠送" class="zengsong">
                    </div>
                </div>
                <div class="youshidibu">
                    <div class="shangpinxiangqing"><a href=""><h3>商品详情</h3></a></div>
                   <a class="erweiman1" href="">手机购买<img src="images/images列表/images/小二维码_03.jpg" alt="" ></a>
                    <div class="zuihoudewending">强化稳定剂</div>
                </div>
                </div> -->
             </div>





            <div class="youshi2">
                <div class="sanfen">
                    <div class="zhoubianshangcheng">
                        <h3>周边商城</h3>
                        <a class="es" href="">更多></a>
                    </div>
                    <div class="tanxinghe">
                        <ul class="fensange">
                            <li>
                                <a href=""><img src="images/雷神.jpg" alt=""></a>
                                <div class="leishen">M4A1雷神英雄级手办...</div>
                                <span class="shangchengjia">商城价：</span>
                                <span class="haoduoqian">￥298.00</span>
                            </li>

                            <li>
                                <a href=""><img src="images/书包.jpg" alt=""></a>
                                <div class="leishen">CF如峰双肩包</div>
                                <span class="shangchengjia">商城价：</span>
                                <span class="haoduoqian">￥139.00</span>
                            </li>

                            <li>
                               <a href=""> <img src="images/烈龙.jpg" alt=""></a>
                                <div class="leishen">汤姆逊-烈龙英雄级手办</div>
                                <span class="shangchengjia">商城价：</span>
                                <span class="haoduoqian">￥498.00</span>
                            </li>
                        </ul>
                    </div>
                </div>
                    <div class="zuihousange">
                        <div class="zhoubianshangcheng">
                            <h3>精彩活动</h3>
                            <a class="es" href="">更多></a>
                        </div>
                        <div class="tanxing3">
                            <ul class="kaifen">
                                <li>
                                    <img src="images/领奖励.jpg" alt="">
                                    <div class="zuiqiangfuli">年末最强福利,&nbsp;&nbsp;全新炼狱</div>
                                    <span class="huodongshijian">活动时间：&nbsp;2021-12-04~2021-12-11&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img class="xiaoshoushou" src="images/images/小手手_03.jpg" alt="">(2049)</span>
                                </li>
                                
                                <li>
                                    <img src="images/基金.jpg" alt="">
                                    <div class="zuiqiangfuli">CFS电竞基金</div>
                                    <span class="huodongshijian">活动时间：&nbsp;2021-11-25~2021-12-25&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img class="xiaoshoushou" src="images/images/小手手_03.jpg" alt="">(2101)</span>
                                </li>
                                
                                <li>
                                    <img src="images/传奇.jpg" alt="">
                                    <div class="zuiqiangfuli">传说之路</div>
                                    <span class="huodongshijian">活动时间：&nbsp;2021-11-19~2022-02-27&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img class="xiaoshoushou" src="images/images/小手手_03.jpg" alt="">(2240)</span>
                                </li>
                            </ul>
                        </div>
                    </div>
            </div>
                </div>
        </div>
        </div>
    <footer>

    </footer>
</body>
</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/cookie.js"></script>
<script>
      $("footer").load("footer.html");


   function  fn(){
    var yuantu = document.getElementById("yuantu");
    var dajin = document.getElementById("dajin");
    var fangda = document.getElementById("fangda");
   
   
    function fangdajing(e) {
        // 兼容
        var e = e || window.event;

        var top = e.pageY - yuantu.offsetTop - dajin.offsetHeight / 2
        var left = e.pageX - yuantu.offsetLeft - dajin.offsetWidth / 2;
        // 边界处理

        if (top < 0) {
            top = 0;
        }
        if (left < 0) {
            left = 0;
        }
        if (top > yuantu.offsetHeight - dajin.offsetHeight) {
            top = yuantu.offsetHeight - dajin.offsetHeight;
        }
        if (left > yuantu.offsetWidth - dajin.offsetWidth) {
            left = yuantu.offsetWidth - dajin.offsetWidth;
        }
        dajin.style.left = left + "px";
        dajin.style.top = top + "px";

        fangda.style.backgroundPosition = `-${left * 2}px -${top * 2}px`
    }

    yuantu.onmousemove = function () {
        fangdajing()
    }
    yuantu.onmouseleave=function(){
        dajin.style.display="none"
        fangda.style.display="none"
    }
    yuantu.onmouseenter=function(){
        dajin.style.display="block"
        fangda.style.display="block"
    }
   }

   
 console.log(getCookie("username"));
    let cookies = getCookie("username")
//详情页渲染
    let shoppinglist = document.querySelector(".shoppinglist")
    function goods(){
        let goodsId = location.search.split("=")[1];
        $.get(
            "getGoodsInfo.php",
        {
            "goodsId":goodsId,
            "vipName":cookies
        },
        function(data){
            console.log(data);
           let htmlStr = "";
           htmlStr +=`
           <div class="zuokong">
                <div id="yuantu">
                    <div id="dajin" class="background-image${data.goodsImg}"></div>
                    <div id="fangda"></div>
                </div>
            </div>
            <div class="youshi">
                <div class="tuzuo">
                <img class="qianghua" src="${data.goodsImg}" alt="">
                <a href=""><img src="" alt="">收藏商品</a>
            </div>
            <div class="jianjie">
                <h2><span class="wending">${data.goodsName}</span></h2>
                <div class="liehuzhe">
                    <div class="shisi">Q币价：${data.goodsDesc}</div>
                    <div class="huiyuan">
                        <div class="huiyuanjia">会员价：</div>
                        <span class="shiyidianjiu">${data.goodsDesc}Q币</span>
                        <div class="weixinjia">微信价：</div>
                        <span class="shisandianwuba">￥${data.goodsPrice}</span>
                    </div>
                </div>
                <div class="shiyongqixian">
                    <span class="qixian">使用期限:</span>
                    <img src="images/images列表/images/五个_03.jpg" alt="" class="five">
                </div>
                <div class="lianggeanniu">
                    <input type="button" value="加入购物车" class="cheche" >
                    <input type="button" value="赠送" class="zengsong">
                </div>
            </div>
            <div class="youshidibu">
                <div class="shangpinxiangqing"><a href=""><h3>商品详情</h3></a></div>
               <a class="erweiman1" href="">手机购买<img src="images/images列表/images/小二维码_03.jpg" alt="" ></a>
                <div class="zuihoudewending">强化稳定剂</div>
            </div>
            </div> 
        `;
          $(".shoppinglist").html(htmlStr);
          fn();
          $(".cheche").click(function(){
              $.post("addShoppingCart.php",{"vipName":cookies,"goodsId":goodsId,"goodsCount":1},function(){
                  location.href = "购物车.html"
              })
          })
        }
        ,"json")}
    $(function(){
        goods();
    })
</script>



